<template>
  <div class="cm-transaction-list bg-c-fff right-height mb70">
    <div class="bread rel">
      <a href="javascript:void(0);" class="font-s-16">业务管理部-法律服务订单管理</a>
    </div>
    <div class="content">
      <choose-type typename="订单状态" valuename="orderType" :itemlist="orderlist" :active="orderActive" @typechanged="onOptionChanged"></choose-type>
      <choose-type typename="交易阶段" valuename="tradeType" :itemlist="typelist" :active="typeActive" @typechanged="onOptionChanged"></choose-type>
      <table width="100%" class="auto">
        <tr>
          <th width="11%">订单时间</th>
          <th width="17%">编号</th>
          <th width="8%">客户信息</th>
          <th width="8%">律师姓名</th>
          <th width="9%">监控员姓名</th>
          <th width="10%">合同标价</th>
          <th width="15%">交易阶段</th>
          <th width="8%">订单状态</th>
          <th width="12%">操作</th>
        </tr>
        <tr v-for="item in list">
          <td>{{item.createTime}}</td>
          <td>{{item.id}}</td>
          <td>{{item.customerName}}</td>
          <td>{{item.lawyerName}}</td>
          <td>{{item.monitorName}}</td>
          <td>{{item.contractPrice/100}}</td>
          <td>{{item.status | status}}</td>
          <td>{{item.stage | stage}}</td>
          <td>
            <button class="blue-button small-btn-css" @click="onDetail(item)">查看详情</button>
          </td>
        </tr>
      </table>
      <div class="fix foot-box">
        <div class="no-data-tip" v-show="list.length===0">暂无相关数据</div>
        <pagination :index="index" :total="total" v-show="list.length!==0" @pagechange="getData"></pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import Pagination from '../components/Pagination'
import ChooseType from '../components/ChooseType'
export default {
  components: {
    Pagination,
    ChooseType
  },
  data() {
    return {
      index: 1,
      total: 0,
      orderActive: '',
      orderlist: [{
        value: '',
        text: '全部'
      }, {
        value: 0,
        text: '待分配'
      }, {
        value: 2,
        text: '进行中'
      }, {
        value: 4,
        text: '已终止'
      }, {
        value: 3,
        text: '已完成'
      }],
      typeActive: '',
      typelist: [{
        value: '',
        text: '全部'
      }, {
        value: 1,
        text: '确认付款'
      }, {
        value: 2,
        text: '监控员绘制流程图'
      }, {
        value: 3,
        text: '法律服务监控'
      }, {
        value: 4,
        text: '服务评价'
      }, {
        value: 5,
        text: '完成评价'
      }],
      list: []
    }
  },
  mounted() {
    this.getData(1)
  },
  methods: {
    onDetail(item) {
      if (item.stage === 2) {
        this.$router.push('/cm-law-notice?type=business&id=' + item.id)
      }
      if (item.status === 1) {
        this.$router.push('/cm-law-notice?type=business&id=' + item.id)
      }
      if (item.status === 2) {
        this.$router.push('/cm-law-drawing?type=business&id=' + item.id)
      }
      if (item.status === 3) {
        this.$router.push('/cm-law-monitor?type=business&id=' + item.id)
      }
      if (item.status === 4) {
        this.$router.push('/cm-law-complete?type=business&id=' + item.id)
      }
      if (item.status === 5) {
        this.$router.push('/cm-law-complete?type=business&id=' + item.id)
      }
    },
    onOptionChanged(type, value) {
      if (type === 'orderType') {
        this.orderActive = value
      }
      if (type === 'tradeType') {
        this.typeActive = value
      }
      this.getData(1)
    },
    getData(n) {
      this.$http.post('/legalService/chief/read/list', {
        page: n,
        rows: 10,
        stage: this.orderActive,
        status: this.typeActive,
        key: this.keyword
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.index = n
          this.total = Math.ceil(data.data.rows.length / 10)
          this.list = data.data.rows
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    }
  },
  filters: {
    status(v) {
      let text = ''
      let data = [{
        value: 1,
        text: '确认付款'
      }, {
        value: 2,
        text: '监控员绘制流程图'
      }, {
        value: 3,
        text: '法律服务监控'
      }, {
        value: 4,
        text: '服务评价'
      }, {
        value: 5,
        text: '完成评价'
      }]
      data.forEach(item => {
        if (v === item.value) {
          text = item.text
        }
      })
      return text
    },
    stage(v) {
      let text = ''
      let data = [{
        value: 0,
        text: '待分配'
      }, {
        value: 2,
        text: '进行中'
      }, {
        value: 1,
        text: '未支付'
      }, {
        value: 4,
        text: '已终止'
      }, {
        value: 3,
        text: '已完成'
      }]
      data.forEach(item => {
        if (v === item.value) {
          text = item.text
        }
      })
      return text
    }
  }
}

</script>
<style type="text/css" scoped>
.bread {
  padding-left: 20px;
  height: 50px;
  border-bottom: 1px solid #ddd;
}

.bread a {
  line-height: 50px;
}

.seach a {
  color: #fff;
  font-size: 14px;
  width: 100px;
  height: 35px;
  line-height: 35px;
}

.cm-transaction-list .seach {
  right: 10px;
  top: 8px;
}

.cm-transaction-list .seach input,
.cm-transaction-list .seach button {
  height: 35px;
  line-height: 35px;
}

.content {
  margin-top: 30px;
  padding: 0 30px;
}

.content table {
  margin-top: 20px;
}

.content table td button:nth-of-type(1) {
  margin-bottom: 7px;
}


.foot-box {
  padding: 35px 32px 15px 13px;
}

.pagination {
  width: auto!important;
  margin: 0 auto!important;
}

.vodal-main .con {
  padding: 4px 13px;
}

.vodal-main .con p {
  margin-bottom: 15px;
}

.vodal-main .con p span {
  width: 94px;
  display: inline-block;
}

select {
  width: 110px;
  height: 35px;
  border: 1px solid #ddd;
}

</style>
